<template>
     <div class="top">
          <div class="choose">
                 <span>
                  用户：<input type="text" class="search_child" placeholder="如:用户名/用户ID/邮箱" v-model="searchValue"></span>
               <span>
                  发表时间：<input type="date" class="search_child" v-model="articleInformationPage.dateTime"></span>
               <span>
                  文章标题：<input type="text" class="search_child" v-model="articleInformationPage.title" placeholder="文章标题"></span>
               <span>
                    排序方式：<select  class="page_index"  @change ="sortBy_($event)">
                               <option  v-for="(item,index) in sortBy" index="index">{{item}}</option>
                            </select>
               </span>
                 <span  class="search_click" @click="search_">搜索</span>
          </div>

          <div class="t_right_">
               状态:
               <label>
                    <input name="statue" checked type="radio" @click="condition_(2)">全部
               </label>
               <label>
                    <input name="statue" type="radio" @click="condition_(1)">已启用
               </label>
               <label>
                    <input name="statue" type="radio" @click="condition_(0)" >审核中
               </label>
               <label>
                    <input name="statue" type="radio" @click="condition_(-1)">已禁用
               </label>
          </div>
     </div>


     <div class="bottom">
          <table cellpadding="0" cellspacing="0" >
               <thead>
               <tr style="height: 40px">
                    <th>序号</th>
                    <th >文章ID</th>
                    <th>作者ID</th>
                    <th>标题</th>
                    <th>封面</th>
                    <th>类型</th>
                    <th style="min-width: 100px">发表日期</th>
                    <th style="min-width: 100px">累计获赞</th>
                    <th style="min-width: 150px">累计浏览</th>
                    <th>状态</th>
                    <th>操作</th>
               </tr>
               </thead>
               <tbody>
               <tr v-for="(item,index) in fuzzyQueries"  v-if="fuzzyQueries.length>0">
                    <td>{{ total.current > 1 ? (index+1)+6*(total.current-1) : index+1}}</td>
                    <td v-html="highlight_(item.wid )"></td>
                    <td v-html="highlight_(item.uid )"></td>
                    <td class="w_title" v-html="highlight_title(item.title )"></td>
                    <td>
                       <p v-if="!item.img">无</p>
                         <img v-else :src=" item.img.split(',').length > 1 ? item.img.split(',')[0] : item.img " alt="图片丢失或不存在" class="art_img">
                    </td>
                    <td>
                         <div class="type">
                              <span v-for="item in item.type.split(',')">
                                   {{item}}
                              </span>
                         </div>

                    </td>
                    <td>{{item.date}}</td>
                    <td>{{item.likes}}</td>
                    <td>{{item.visit}}</td>
                    <td>
                          <span class="button_style"
                                :style="{'background': item.status === 1 ? '#32CD32': item.status === 0 ? '#efcb04':'#DC143C' }">
                             {{item.status === 1 ? '已审核' : item.status === 0 ? '审核中' : '审核失败' }}
                          </span>
                    </td>
                    <td>
                         <span class="edit" @click="edit_userInfo(item)">编辑</span>
                         <span class="edit del" @click="edit_del(item,index)">删除</span>
                    </td>
               </tr>
               <tr v-else-if="fuzzyQueries.length===0 && load_" style="height: 50vh;background: transparent">
                    <LoadTheAnimation ></LoadTheAnimation>
               </tr>
               <tr v-show="!load_">
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td><h2>未查询到任何数据</h2></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
               </tr>
               </tbody>
          </table>
     </div>
     <div class="bottom_">
          <span style="margin-right:10px">共{{total.page}}页, 共{{total.sum}}条数据 当前第{{total.current}}页</span>
          <span class="jian"  @click="left_">
               <img src="../../../public/static/jian_r.png" alt="">
          </span>
          <input type="text" class="limit" v-model="total.current" @focusout="limit_">
          <span class="jian" @click="right_">
               <img src="../../../public/static/jian_l.png" alt="">
          </span>
          <select @change ="page_($event)" class="page_index">
               <option  v-for="(item,index) in 3" >{{(index+1)*6}}/条</option>
          </select>
     </div>
     <PromptWindow v-show="box_confirm" @confirm="confirm" :info="info" :index="index_"></PromptWindow>
</template>

<script>
import api from "@/api";
import LoadTheAnimation from "@/components/publicCommon/LoadTheAnimation.vue";
import PromptWindow from "@/components/publicCommon/PromptWindow.vue";

export default {
     name: "ArticleInformation",
     components: {PromptWindow, LoadTheAnimation},
     emits:['confirm'],
     data(){
          return{
               select:false,
               searchValue:"",
               fuzzyQueries:"",
               index:1,
               condition:1,
               articleInformationPage:{
                    index:1,
                    condition:null,
                    types:2,
                    page:6,
                    dateTime:null,
                    title:null,
                    sortBy:0,
               },
               total:{
                    sum:'',
                    page:'',
                    size:'',
                    current:'',
               },
               load_:true,
               info:"",
               box_confirm:false,
               index_:"",
               del_info:false,
               sortBy:['发表时间','浏览量','获赞数'],
          }
     },
     watch:{
          'articleInformationPage.page'(newValue,oldValue){
               this.articleInformationPage.page = newValue;
               this.request_(this.articleInformationPage);
          },
          'articleInformationPage.dateTime'(newValue,oldValue){
               if(newValue == "") {
                    this.articleInformationPage.dateTime = null
               }
          },
          'articleInformationPage.title'(newValue,oldValue){
               if(newValue == "") {
                    this.articleInformationPage.title = null
               }
          },
          searchValue(newValue,oldValue){
               if(newValue === ""){
                    this.articleInformationPage.condition =null
                    this.request_(this.articleInformationPage);
               }else{
                    this.articleInformationPage.condition = newValue
               }
          },
          del_info(newValue,oldValue){
               if(newValue){
                    let _this = this;
                  api.writingsDel({wid:[_this.info.wid],file:[_this.info.img]}).then((res)=>{
                     if(res.data.code === 200){
                          this.$store.commit("requestInfo", "删除文章成功!");
                     }else {
                          this.$store.commit("requestInfo", "删除文章失败!");
                     }
                     this.request_(this.articleInformationPage);
                  })
               }
                         this.info = "";
                         this.del_info = false;
          },
          'total.current'(newVal, oldVal){
              let reg = /^\+?[1-9]\d*$/;
               if(reg.test(newVal)){
                    this.articleInformationPage.index = newVal;
               }
               if(newVal > this.total.page){
                    this.articleInformationPage.index = 1;
               }
          }
     },
     mounted() {
          this.request_(this.articleInformationPage);
     },
     methods:{
          page_(event){
               this.articleInformationPage.page = parseInt(event.target.value);
          },
          sortBy_(event){
               switch (event.target.value) {
                    case '浏览量':
                         this.articleInformationPage.sortBy = 2;
                         break;
                    case '获赞数':
                         this.articleInformationPage.sortBy = 1;
                         break;
                    case '发表时间':
                         this.articleInformationPage.sortBy = 0;
                         break;
               }
          },
          confirm(index,bool){
               this.box_confirm = false;
               if(bool){
                    this.del_info  = true;
                    this.fuzzyQueries.splice(index, 1);
               }
          },
          edit_del(info, index) {
               this.info = info;
               this.index_ = index;
               this.box_confirm = true;
          },
          edit_userInfo(info){
               window.localStorage.setItem("edit_info",JSON.stringify(info));
               this.$router.push('/articleInformationEditing')
          },
          limit_(){
               this.request_(this.articleInformationPage);
          },
          condition_(condition){
                 this.articleInformationPage.types = condition;
                 this.articleInformationPage.index = 1;
                 this.request_(this.articleInformationPage);

          },
          request_(articleInformationPage){
               api.selectLimitInformationAdmin(articleInformationPage).then((res)=>{
                    this.fuzzyQueries = res.data.data.records;
                    this.total.sum = res.data.data.total;
                    this.total.page = res.data.data.pages;
                    this.total.current = res.data.data.current;
                    this.total.size = res.data.data.size;
                    if(this.fuzzyQueries.length===0){
                         setTimeout(()=>{
                              this.load_ = false;
                         },1000)
                    }else {
                         this.load_ = true;
                    }
               })
          },
          search_(){
               this.request_(this.articleInformationPage)
          },
          highlight_(text){
               text = text+"";
               if(this.searchValue !== "")
                    return text.replace(this.searchValue,'<span style="background: #f6f604;">'+this.searchValue+'</span>')
               else return text
          },
          highlight_title(text){
               text = text+"";
               if(this.articleInformationPage.title !== "")
                    return text.replace(this.articleInformationPage.title,'<span style="background: #f6f604;">'+this.articleInformationPage.title+'</span>')
               else return text
          },
          left_(){
               this.articleInformationPage.index-=1;
               if( this.articleInformationPage.index<1){
                    this.articleInformationPage.index=1;
                    this.$store.commit("requestInfo", "当前已是第一页!");
                    return;
               }
               this.request_( this.articleInformationPage);
          },
          right_(){
               this.articleInformationPage.index+=1;
               if( this.articleInformationPage.index> this.total.page){
                    this.articleInformationPage.index = this.total.page;
                    this.$store.commit("requestInfo", "已是最后一页!");
                    return;
               }
               this.request_( this.articleInformationPage);
          }

     }
}
</script>

<style scoped>


tr{
     min-width: 20px;
     max-width: 200px !important;
     text-align: center;
     height: 95px;
     padding: 0 5px;
     background: #fff;
     margin-bottom: 5px;
     animation: tr_ 0.3s ease-in-out 0s 1 forwards;
}
@keyframes tr_ {
     0%{
        transform: scaleY(0%);
     }100%{
                transform: scaleY(100%);
           }
}
.w_title{
    overflow: hidden;  /*超出部分隐藏*/
    white-space: nowrap;  /*禁止换行*/
    text-overflow: ellipsis; /*省略号*/

}
tr:nth-child(2n){
     background: rgba(206, 202, 202, 0.5);
}

.type{
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     list-style: none;
}
.type span{
     min-width: 20px;
     padding: 5px;
     background: #0c97e1;
     color: white;
     margin: 3px;
     border-radius: 2px;
}
.art_img{
     width:155px;
     height: 90px;
     margin-top: 5px;
}
.search_child{
     height: 30px;
     padding:0 10px;
     outline:none;
}
.choose{
     margin-left: 10px;
     display: flex;
     justify-content: center;
     align-items: center;
}
.choose span{
     margin-right: 10px;
}
.search_click{
     display: inline-block;
     background: #057cf8;
     padding: 4px 7px;
     color: white;
     cursor: pointer;
}
.search_click:hover{
     opacity: .8;
}
.page_index{
     height: 26px;
     outline: none;
     padding: 0 7px;
     color: #4297ec;
     border: 1px solid #282828;
}
option{
     padding: 10px;
}
</style>